// import { getAllRoleList, isAccountExist } from '/@/api/demo/system';
import { reactive, h } from 'vue';

import { useDebounceFn } from '@vueuse/core';

import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { getRoleList } from '/@/api/admin/user';
// getPostList,
import { getDictTypeListApi } from '/@/api/admin/dict';
import { DICT } from '/@/enums/dict';

export const columns: BasicColumn[] = [
  {
    title: '用户名',
    dataIndex: 'username',
    // width: 180,
  },

  // {
  //   title: '昵称',
  //   dataIndex: 'nickname',
  //   width: 120,
  // },
  {
    title: '姓名',
    dataIndex: 'name',
    // width: 180,
  },
  {
    title: '所属部门',
    dataIndex: 'deptName',
    // width: 180,
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    // width: 160,
  },
  // {
  //   title: '岗位',
  //   dataIndex: 'postList',
  //   format(_, { postList }) {
  //     if (!postList || postList.length <= 0) return '';

  //     return postList.map((el) => <span>{el.postName}</span>);
  //   },
  // },
  {
    title: '角色',
    dataIndex: 'roleList',
    width: 300,
    ellipsis: true,
    format(_, { roleList }) {
      if (!roleList || roleList.length <= 0) return '';

      return roleList.map((el) => el.roleName).join(',');
    },
  },
  {
    title: '状态',
    dataIndex: 'userValid',
    customRender: ({ record }) =>
      record.userValid == 1
        ? h('span', { style: { color: 'rgb(49,187,93)' } }, '启用')
        : h('span', { style: { color: '#ff0000' } }, '禁用'),
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

const roleParams = reactive({ roleName: '' });

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    colProps: { span: 4 },
  },
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    colProps: { span: 4 },
  },
  {
    field: 'email',
    label: '邮箱',
    component: 'Input',
    colProps: { span: 4 },
  },
  {
    field: 'role',
    label: '角色',
    component: 'ApiSelect',
    componentProps: () => {
      return {
        mode: 'multiple',
        allowClear: false,
        api: getRoleList,
        showSearch: true,
        maxTagCount: 2,
        filterOption: (input: string, option: any) => {
          return option.label.indexOf(input) >= 0;
        },
        labelField: 'roleName',
        valueField: 'roleId',
        resultField: 'records',
        placeholder: '请选择角色',

        getPopupContainer: () => document.body,
      };
    },
    colProps: { span: 6 },
  },
];

export const accountFormSchema: FormSchema[] = [
  {
    field: 'avatar',
    label: '用户头像',
    component: 'HUpload',
    slot: 'userUpload',
    // componentProps: {
    //   showFileName: false,
    //   title: '头像上传',
    //   type: 'button',
    //   showUploadIcon: true,
    // },
    colProps: {
      span: 24,
    },
  },
  {
    field: 'username',
    label: '用户名',
    component: 'Input',
    // helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
    rules: [
      {
        required: true,
        message: '请输入用户名',
      },
      // {
      //   validator(_, value) {
      //     return new Promise((resolve, reject) => {
      //       isAccountExist(value)
      //         .then(() => resolve())
      //         .catch((err) => {
      //           reject(err.message || '验证失败');
      //         });
      //     });
      //   },
      // },
    ],
  },
  {
    field: 'name',
    label: '姓名',
    component: 'Input',
    required: true,
  },
  {
    field: 'userValid',
    label: '启用状态',
    component: 'RadioGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        {
          label: '启用',
          value: 1,
        },
        {
          label: '禁用',
          value: 0,
        },
      ],
    },
    required: true,
  },
  // {
  //   field: 'password',
  //   label: '密码',
  //   component: 'InputPassword',
  //   required: true,
  //   ifShow: false,
  // },
  {
    field: 'userSex',
    label: '性别',
    component: 'ApiRadioGroup',
    required: true,
    defaultValue: 1,
    componentProps: {
      api: getDictTypeListApi,
      labelField: 'label',
      valueField: 'intValue',
      params: {
        type: DICT.GENDER,
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'deptId',
    label: '所属部门',
    component: 'TreeSelect',
    componentProps: {
      multiple: false,
      fieldNames: {
        label: 'name',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
    required: true,
  },
  {
    label: '手机号',
    field: 'phone',
    component: 'Input',
    required: true,
  },
  {
    field: 'userCode',
    label: '工号',
    component: 'Input',
    required: true,
  },

  {
    field: 'userSort',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'role',
    label: '所属角色',
    required: true,
    component: 'ApiSelect',
    componentProps: () => {
      return {
        mode: 'multiple',
        allowClear: false,
        api: getRoleList,
        showSearch: true,
        filterOption: false,
        labelField: 'roleName',
        valueField: 'roleId',
        resultField: 'records',
        placeholder: '请选择角色',
        params: roleParams,
        onSearch: useDebounceFn((v) => {
          roleParams.roleName = v;
        }, 200),
        getPopupContainer: () => document.body,
      };
    },
    colProps: { lg: 24, md: 24 },
  },
  {
    field: 'userTitle',
    label: '用户头衔',
    component: 'Input',
    required: false,
  },
  {
    field: 'userPos',
    label: '用户职位',
    component: 'Input',
    required: false,
  },
  {
    field: 'dept',
    label: '兼职部门',
    component: 'TreeSelect',
    componentProps: {
      multiple: true,
      fieldNames: {
        label: 'name',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
    required: false,
    colProps: { span: 24 },
  },
  // {
  //   label: '岗位',
  //   field: 'post',
  //   component: 'ApiSelect',
  //   componentProps: {
  //     api: getPostList,
  //     labelField: 'postName',
  //     valueField: 'postId',
  //     mode: 'multiple',
  //   },
  //   required: true,
  // },

  // {
  //   field: 'divider',
  //   label: '',
  //   subLabel: '以下是展开信息',
  //   component: 'Divider',

  //   colProps: { span: 24, lg: 24, md: 24 },
  //   componentProps: {
  //     orientation: 'center',
  //     plain: true,
  //   },
  // },
];

export const accountFormSchemaAllow: FormSchema[] = [
  {
    field: 'officePhone',
    label: '办公电话',
    component: 'Input',
    required: false,
  },
  {
    field: 'bindIp',
    label: '绑定IP',
    component: 'Input',
    required: false,
    colProps: { lg: 12, md: 12 },
  },
  {
    field: 'nickname',
    label: '昵称',
    component: 'Input',
    required: false,
  },
  {
    label: '邮箱',
    field: 'email',
    component: 'Input',
    required: false,
  },
  // todo
  // {
  //   field: 'avatar',
  //   label: '用户头像',
  //   component: 'Input',
  //   required: false,
  // },
  {
    field: 'ddOpenid',
    label: '钉钉',
    component: 'Input',
    required: false,
  },
  {
    field: 'wxOpenid',
    label: '微信',
    component: 'Input',
    required: false,
  },
  {
    field: 'birthday',
    label: '生日',
    component: 'DatePicker',
  },
  {
    field: 'qqOpenid',
    label: 'QQ',
    component: 'Input',
    required: false,
  },

  // {
  //   field: 'userSort',
  //   label: '排序',
  //   component: 'InputNumber',
  //   required: true,
  //   componentProps: {
  //     precision: 0,
  //   },
  // },

  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
    colProps: { lg: 24, md: 24 },
  },
];
